<clr-wizard #wizard [(clrWizardOpen)]="opened" clrWizardSize="xl" (clrWizardOnFinish)="onSubmit()"
            (clrWizardOnCancel)="onCancel()" [clrWizardClosable]="false">
    <clr-wizard-title>{{"APP_CREATE_CLUSTER"|translate}}</clr-wizard-title>

    <clr-wizard-button [type]="'cancel'">{{"APP_CANCEL"|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">{{"APP_BACK"|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'next'">{{"APP_NEXT"|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">{{"APP_FINISH"|translate}}</clr-wizard-button>

    <clr-wizard-page [clrWizardPageNextDisabled]="basicForm.invalid || nameChecking || !nameValid">
        <ng-template clrPageTitle>{{"APP_CLUSTER_INFO"|translate}}</ng-template>
        <form clrForm #basicForm='ngForm'>

            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="32" name="name" [(ngModel)]="item.name"
                       pattern="[a-z]([-a-z0-9]*[a-z0-9])?(\\\\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
                       (blur)="onNameCheck()"
                       required/>

                <clr-control-helper>
                    <span *ngIf="nameChecking"><clr-spinner clrInline></clr-spinner>
                        {{'APP_CHECKING'|translate}}<br/>
                    </span>
                    <span *ngIf="!nameValid">
                        {{'APP_CLUSTER_NAME_INVALID'|translate}}<br/>
                    </span>
                    {{'APP_CLUSTER_NAME_HELPER'|translate}}<br/>
                </clr-control-helper>
            </clr-input-container>


            <clr-select-container>
                <label>{{"APP_PROVIDER"|translate}}</label>
                <select clrSelect name="provider" [(ngModel)]="item.provider" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="bareMetal">{{"APP_BARE_METAL" | translate}}</option>
                    <option value="plan">{{"APP_PLAN"|translate}}</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>{{"APP_VERSION"|translate}}</label>
                <select clrSelect name="version" [(ngModel)]="item.version" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option *ngFor="let v of versions" [value]="v">{{v}}</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>{{"APP_ARCHITECTURE"|translate}}</label>
                <select clrSelect name="arch" [(ngModel)]="item.architectures" (change)="changeArch(item.architectures)"
                        required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="arm64">ARM64</option>
                    <option value="amd64">AMD64</option>
                </select>
            </clr-select-container>

        </form>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="seniorForm.invalid">
        <ng-template clrPageTitle>{{"APP_SENIOR"|translate}} {{"APP_OPTION"|translate}}</ng-template>

        <form clrForm #seniorForm='ngForm'>
            <clr-select-container>
                <label>{{"APP_CONTAINER_RUNTIME_TYPE"|translate}}</label>
                <select clrSelect name="runtime" [(ngModel)]="item.runtimeType" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="docker">docker</option>
                    <option value="containerd" *ngIf="item.architectures =='amd64'">containerd</option>
                </select>
            </clr-select-container>

            <clr-input-container *ngIf="item.runtimeType == 'docker'">
                <label>{{"APP_DOCKER_STORAGE_DIR"|translate}}</label>
                <input clrInput [size]="32" name="storage_dir" [(ngModel)]="item.dockerStorageDir"/>
            </clr-input-container>
            <clr-input-container *ngIf="item.runtimeType == 'containerd'">
                <label>{{"APP_CONTAINERD_STORAGE_DIR"|translate}}</label>
                <input clrInput [size]="32" name="storage_dir" [(ngModel)]="item.containerdStorageDir"/>
            </clr-input-container>

            <clr-select-container>
                <label>{{"APP_CONTAINER_NETWORK_TYPE"|translate}}</label>
                <select clrSelect name="network" [(ngModel)]="item.networkType" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="flannel">flannel</option>
                    <option value="calico">calico</option>
                </select>
            </clr-select-container>


            <clr-select-container *ngIf="item.networkType === 'flannel'">
                <label>{{"APP_NETWORK_MODE"|translate}}</label>
                <select clrSelect name="flannel_backend" [(ngModel)]="item.flannelBackend">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="host-gw">host-gw</option>
                    <option value="vxlan">vxlan</option>
                </select>
            </clr-select-container>

            <clr-select-container *ngIf="item.networkType === 'calico'">
                <label>{{"APP_NETWORK_MODE"|translate}}</label>
                <select clrSelect name="calico_ipv4pool_ipip" [(ngModel)]="item.calicoIpv4poolIpip">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="off">bgp</option>
                    <option value="Always">ipip</option>
                </select>
            </clr-select-container>
            <clr-input-container>
                <label>Pod {{"APP_SUBNET"|translate}}</label>
                <input clrInput size="34" name="pod_subnet" [(ngModel)]="item.kubePodSubnet"/>
            </clr-input-container>

            <clr-input-container>
                <label>Service {{"APP_SUBNET"|translate}}</label>
                <input clrInput size="34" name="service_subnet" [(ngModel)]="item.kubeServiceSubnet"/>
            </clr-input-container>

            <clr-input-container>
                <label>Container {{"APP_SUBNET"|translate}}</label>
                <input clrInput size="34" name="docker_subnet" [(ngModel)]="item.dockerSubnet"/>
            </clr-input-container>

            <clr-input-container>
                <label>{{"APP_MAX"|translate}}POD {{"APP_COUNT"|translate}}</label>
                <input clrInput type="number" size="34" name="kube_max_pods" [(ngModel)]="item.kubeMaxPods">
            </clr-input-container>

            <clr-select-container>
                <label>kube-proxy {{"APP_MODE"|translate}}</label>
                <select clrSelect name="kube_proxy_mode" [(ngModel)]="item.kubeProxyMode">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="iptables">Iptables</option>
                    <option value="ipvs">ipvs</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>ingress {{"APP_TYPE"|translate}}</label>
                <select clrSelect name="ingress_controller_type" [(ngModel)]="item.ingressControllerType">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="nginx">nginx</option>
                    <option value="traefik">traefik</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>Kubernetes {{"APP_AUDIT"|translate}}</label>
                <select clrSelect name="kubernetes_audit" [(ngModel)]="item.kubernetesAudit">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="yes">{{"APP_ENABLE"|translate}}</option>
                    <option value="no">{{"APP_DISABLE"|translate}}</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>helm</label>
                <select clrSelect name="helmVersion" [(ngModel)]="item.helmVersion">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option *ngFor="let version of helmVersions" [value]="version"> {{version}}</option>
                </select>
            </clr-select-container>

            <clr-select-container>
                <label>{{"APP_GPU_INSTALL"|translate}}</label>
                <select clrSelect name="support_gpu" [(ngModel)]="item.supportGpu">
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option value="enable">{{"APP_ENABLE"|translate}}</option>
                    <option value="disable">{{"APP_DISABLE"|translate}}</option>
                </select>
            </clr-select-container>

            <clr-input-container>
                <label>{{"NETWORK_INTERFACE"|translate}}</label>
                <input clrInput type="text" size="34" name="kube_network_interface" [(ngModel)]="item.networkInterface">
                <clr-control-helper>{{'NETWORK_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
        </form>
    </clr-wizard-page>


    <clr-wizard-page [clrWizardPageNextDisabled]="!(masters.length===1 || masters.length===3) || workers.length === 0"
                     (clrWizardPageNext)="fullNodes()" *ngIf="item.provider === 'bareMetal'">
        <ng-template clrPageTitle>{{"APP_NODE_INFO"|translate}}</ng-template>
        <span>{{'APP_CLUSTER_HOST_HELPER'|translate}}</span>
        <form>
            <div>
                <h3>Masters ({{"APP_MASTER_HELPER"|translate}})</h3>
                <hr/>
                <l-select2 name="masters" [(ngModel)]="masters" [data]="hosts" [options]="options"
                           (valueChange)="toggle('master')"></l-select2>
            </div>
            <div>
                <h3>Workers</h3>
                <hr/>
                <l-select2 name="workers" [(ngModel)]="workers" [data]="hosts" [options]="options"
                           (valueChange)="toggle('worker')"></l-select2>
            </div>
        </form>
    </clr-wizard-page>

    <clr-wizard-page *ngIf="item.provider === 'plan'" [clrWizardPageNextDisabled]="planForm.invalid">
        <ng-template clrPageTitle>{{"APP_DEPLOY_PLAN"|translate}}</ng-template>
        <form #planForm='ngForm' clrForm>
            <clr-select-container>
                <label>{{"APP_DEPLOY_PLAN"|translate}}</label>
                <select clrSelect name="plan" [(ngModel)]="item.plan" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option *ngFor="let plan of plans" [value]="plan.name"> {{plan.name}}</option>
                </select>
            </clr-select-container>

            <clr-input-container>
                <label>{{"APP_WORKER_AMOUNT"|translate}}</label>
                <input clrInput oninput="if(value<1)value=1" min="1" type="number" name="workerSize"
                       [(ngModel)]="item.workerAmount">
            </clr-input-container>
        </form>
    </clr-wizard-page>

    <clr-wizard-page>
        <ng-template clrPageTitle>{{"APP_CONFIRM_INFO"|translate}}</ng-template>
        <form>
            <div>
                <table class="table table-vertical">
                    <tbody>
                    <tr>
                        <th>{{"APP_NAME"|translate}}</th>
                        <td>{{item.name}}</td>
                    </tr>
                    <tr>
                        <th>{{"APP_VERSION"|translate}}</th>
                        <td>{{item.version}}</td>
                    </tr>
                    <tr>
                        <th>{{"APP_PROVIDER"|translate}}</th>
                        <td>{{item.provider}}</td>
                    </tr>
                    <tr>
                        <th>{{"APP_CONTAINER_NETWORK_TYPE"|translate}}</th>
                        <td>{{item.networkType}}</td>
                    </tr>
                    <tr>
                        <th>{{"APP_CONTAINER_RUNTIME_TYPE"|translate}}</th>
                        <td>{{item.runtimeType}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </form>
    </clr-wizard-page>

</clr-wizard>
